<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/business.js" th:src="@{/business.js}"></script>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/layui/css/modules/layer/default/layer.css" media="all">
<script src="../../static/layui/js/layui.js" th:src="@{/layui/js/layui.js}"></script>
<body>
<h2>
    <strong>
        <button style="float: left;">
            <a href="/">首页</a>
        </button>
        <button style="float: left; margin-left: 5px">
            <a href="/model-list.html">模型列表</a>
        </button>
        <button style="float: left; margin-left: 5px">
            <a href="/users-events-list">事件列表</a>
        </button>
    </strong>
</h2>
<hr>

<div class="layui-tab">
    <ul class="layui-tab-title" id="test">
        <li th:text="${user1.name}" th:each="user1,num:${users}" th:id="${user1.id}" th:class="${num.index} eq 0 ? layui-this : ''"></li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <table border="1" class="layui-table" lay-even="" lay-skin="nob" id="content">

            </table>
        </div>
    </div>
</div>

<!--模仿bootstrap的模态框-->
<div id="motaikunag" style="display: none; text-align:center">
    <div class="layui-row">
        <div class="layui-col-md9">审批</div>
    </div>
    <input type="text" id="id">
    <input type="text" id="assigneeId">
    <div class="layui-row">
        <div class="layui-col-md6">
            <label>
                <input type="radio" name="content" value="通过"/>
            </label>通过
            <label>
                <input type="radio" name="content" value="不通过"/>
            </label>不通过
        </div>
    </div>

    <br/>
    <input type="button" onclick="javascript:completeForm()" title="提交" value="提交">
</div>

<script>
    layui.use('element', function () {
    });

    //只需要找到你点击的是哪个ul里面的就行
    $("ul#test").on("click", "li", function () {
        var content = $("#content");
        content.empty();
        $.ajax({
            url: "list",
            type: "POST",
            data: {"assignee": $(this)[0].id},
            success: function (result) {
                var html = "<tr>\n" +
                    "                    <th>序号</th>\n" +
                    "                    <th>受理人</th>\n" +
                    "                    <th>请假内容</th>\n" +
                    "                    <th>请假时长</th>\n" +
                    "                    <th>申请时间</th>\n" +
                    "                    <th>操作</th>\n" +
                    "                </tr>";
                $.each(result, function (index, item) {
                    html += "<tr>\n" +
                        "                    <td>" + (index + 1) + "</td>\n" +
                        "                    <td>" + item.assigneeName + "</td>\n" +
                        "                    <td>" + item.content + "</td>\n" +
                        "                    <td>" + item.day + "(天)</td>\n" +
                        "                    <td>" + formatDateTime(item.date) + "</td>\n" +
                        "                    <td><button data-method=\"offset\" data-type=\"auto\" class=\"layui-btn layui-btn-normal\" data-type=\"test11\" aid='" + item.assignee + "' eid='" + item.id + "' onclick='openModak(this)'>审批</button></td>\n" +
                        "                </tr>";
                });
                content.append(html);
            }
        })
    });


    function openModak(data) {
        $("#id").val(data.getAttribute("eid"));//向模态框中赋值
        $("#assigneeId").val(data.getAttribute("aid"));//向模态框中赋值
        layui.use(['layer'], function () {
            var layer = layui.layer, $ = layui.$;
            layer.open({
                type: 1,//类型
                area: ['400px', '300px'],//定义宽和高
                title: '审批单',//题目
                shadeClose: false,//点击遮罩层关闭
                content: $('#motaikunag')//打开的内容
            });
        })
    }


    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    }

    function completeForm() {
        $.ajax({
            url: "/handle",
            type: "POST",
            data: {"id": $("#id").val(), "comment": $("input:radio:checked").val(), "assigneeId": $("#assigneeId").val()},
            success: function (result) {
                alert(result);
                window.location.href = "/users-events-list";
            }
        })
    }

</script>

</body>
</html>
